<template>
    <div class="SearchCom-container">
        <!-- 搜索导航 -->
        <div class="nav-line">
            <a-breadcrumb>
                <a-breadcrumb-item class="my-ant-breadcrumb-item">
                    <router-link to="/">
                        <a-icon type="home" style="font-size: 18px;"/>
                        <span style="line-height: 19px;"> 首页</span>
                    </router-link>
                </a-breadcrumb-item>
                <a-breadcrumb-item href="">
                    <span>课程搜索</span>
                </a-breadcrumb-item>
            </a-breadcrumb>
        </div>

        <!-- 分类搜索 -->
        <div class="classify-line">
            <!-- 专题分类 -->
            <div class="course-subject">
                <div>
                    <span class="title">专题：</span>
                </div>
                <div>
                    <span @click="subjectId = ''" :class="{ 'active': subjectId == '' }">全部专题</span>
                    <span v-for="(item) in classifyList" :key="item.subjectId" @click="subjectId = item.subjectId"
                        :class="{ 'active': subjectId == item.subjectId }">{{
                            item.subjectTitle }}</span>
                </div>
            </div>
            <!-- 类型 -->
            <div class="course-type">
                <span class="title">类型：</span>
                <span @click="type = ''; type = ''" :class="{ 'active': type == '' }">全部类型</span>
                <span @click="type = 'free'" :class="{ 'active': type == 'free' }">免费课程</span>
                <span @click="type = 'pay'" :class="{ 'active': type == 'pay' }">付费课程</span>
                <span @click="type = 'boutique'" :class="{ 'active': type == 'boutique' }">精品课程</span>
                <span @click="type = 'discount'" :class="{ 'active': type == 'discount' }">限时折扣课程</span>
            </div>
            <!-- 直播录播类型分类 -->
            <div class="course-method">
                <span class="title">方式：</span>

                <span @click="courseType = '';" :class="{ 'active': courseType == '' }">全部方式</span>
                <span @click="courseType = 'live'; courseType = 'live'"
                    :class="{ 'active': courseType == 'live' }">直播课程</span>
                <span @click="courseType = 'recorded'; courseType = 'recorded'"
                    :class="{ 'active': courseType == 'recorded' }">录播课程</span>

            </div>

        </div>

        <!-- 搜索结果 -->
        <div class="search-result-box">
            <div>
                <div class=" class-list-item" v-for="item in searchResultList" :key="item.courseId"
                    @click="goToCourseDetail(item.courseId)">
                    <div class="img-container">
                        <img :src="item.coverFileUrl" alt="">
                    </div>
                    <div class="class-title"> {{ item.courseTitle }}</div>
                    <div class="class-info"> 共 {{ item.subSectionNum }} 节课| {{ item.learningNum }} 人报名 </div>
                    <div class="class-price">
                        <div>
                            <span class="free" v-if="item.isFree == 1">免费</span>
                            <span class="price" v-else>
                                ￥{{ item.discountPrice }}
                            </span>
                            <span class="old-price" v-if="item.isFree != 1 && item.isDiscount == 1">
                                ￥{{ item.coursePrice }}
                            </span>
                        </div>
                        <span v-if="item.isFree != 1 && item.isDiscount == 1" class="discount-info">限时钜惠</span>
                    </div>
                </div>
            </div>
            <!-- 无搜索结果 -->
            <div class="no-search-result-box" v-show="total == 0">
                <div>暂无相关搜索结果，换个关键词试试吧 : )</div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <div>
                <a-pagination v-model="pageNum" :page-size-options="pageSizeOptions" show-size-changer :total="total"
                    :page-size="pageSize" @showSizeChange="onShowSizeChange">
                </a-pagination>
            </div>
        </div>
    </div>
</template>


<script>
import { getClassifyList, getSearchResult } from "@/api/request"
export default {
    name: 'SearchCom',
    data() {
        return {
            classifyList: [],
            searchResultList: [],
            pageNum: 1,//请求的页码，也是分页的当前页码
            pageSize: 15,
            courseId: '',//课程id,用来跳转详情页
            subjectId: '',//专题分类id
            type: '',//课程类型 free boutique pay discount
            courseType: '',
            keyword: '',
            pageSizeOptions: ['5', '15', '30'],
            total: 0,//搜索结果总个数


        }
    },

    created() {
        //获取分类列表
        getClassifyList().then((result) => {
            this.classifyList = result.rows;
            console.log('getClassifyList search com', this.classifyList);
        }).catch((err) => {
            console.log(err);
        });
    },
    methods: {
        // 跳转课程详情
        goToCourseDetail(courseId) {
            this.$router.push({
                path: 'detail',
                query: {
                    courseId: courseId
                }
            })
        },
        //跳转，并刷新搜索结果
        reFlashSearchResult() {
            this.$router.push({
                path: '/search',
                query: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    type: this.type,
                    subjectId: this.subjectId,
                    keyword: this.keyword,
                    courseType: this.courseType
                }
            }).catch((err) => {
                if (err.name !== 'NavigationDuplicated') {
                    console.error(err);
                }
            })
            this.onlyReFlashSearchResult();
        },
        //仅再次请求搜索结果
        onlyReFlashSearchResult() {
            this.subjectId = this.$route.query.subjectId || this.subjectId;
            this.keyword = this.$route.query.keyword || this.keyword;
            this.courseType = this.$route.query.courseType || this.courseType;
            this.type = this.$route.query.type || this.type;
            getSearchResult(this.pageNum, this.pageSize, this.type, this.subjectId, this.keyword, this.courseType).then((result) => {
                this.searchResultList = result.courseList;
                this.total = result.total;
            }).catch((err) => {
                console.log(err);
            });
        },
        //pageSize 变化的回调
        onShowSizeChange(pageNum, pageSize) {
            this.pageNum = pageNum;
            this.pageSize = pageSize;
            this.onlyReFlashSearchResult();
        }


    },
    watch: {
        /* 
            监听data中的参数，
                使用场景是：用户在组件内部修改了某个变量时，触发刷新
                用户交互 → 修改 data 中的变量 → watch 触发 → 跳转路由 + 刷新搜索
            
            监听 $route.query 中的变量
                当你希望响应 URL 参数变化时更新组件状态和搜索结果。
                这些变量是由 URL 传入的参数驱动的。
         */
        //检测路由参数的变化，若变化，则刷新搜索结果
        pageNum: {
            handler() {
                if (this.$route.path === '/search')
                    this.reFlashSearchResult();
                else
                    this.onlyReFlashSearchResult();
            }
        },
        pageSize: {
            handler() {
                if (this.$route.path === '/search')
                    this.reFlashSearchResult();
                else
                    this.onlyReFlashSearchResult();
            }
        },
        type: {
            handler() {
                if (this.$route.path === '/search')
                    this.reFlashSearchResult();
                else
                    this.onlyReFlashSearchResult();
            }
        },
        subjectId: {
            handler() {
                // 判断是否为搜索页,若是搜索页，则push，否则仅刷新
                if (this.$route.path === '/search')
                    this.reFlashSearchResult();
                else
                    this.onlyReFlashSearchResult();
            }
        },
        courseType: {
            handler() {
                if (this.$route.path === '/search')
                    this.reFlashSearchResult();
                else
                    this.onlyReFlashSearchResult();
            }
        },
        '$route.query.type': {
            handler(type) {
                this.type = type;
                this.onlyReFlashSearchResult();
            }
        },
        '$route.query.keyword': {
            handler(keyword) {
                this.keyword = keyword;
                this.onlyReFlashSearchResult();
            },
            immediate: true
        },
        '$route.query.subjectId': {
            handler(subjectId) {

                this.subjectId = subjectId;
                this.onlyReFlashSearchResult();
            },
            immediate: true
        }

    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;

    &:link,
    &:visited,
    &:hover,
    &active {
        color: inherit;
    }
}

ul>li {
    list-style: none;
}

.SearchCom-container {
    width: 1200px;
    margin: 0 auto;
}

.nav-line {
    >div {
        display: inline-block;
        padding: 10px 30px 10px 0;
    }
}

.classify-line {
    >div {
        margin: 20px 0;
        line-height: 35px;
        display: flex;
        align-items: center;

        .title {
            display: inline-block;
            width: 70px;
            line-height: 35px;
            color: rgba(0, 0, 0, .5);

        }

        span {
            padding: 0 10px;
            white-space: nowrap;
            // margin: 10px 0;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            box-sizing: border-box;

            &:hover {
                cursor: pointer;
            }
        }
    }
}

.active {
    color: #fff;
    background-color: rgb(0, 207, 140);
    height: 35px;
    line-height: 35px;
}

.search-result-box {
    >div:first-of-type {
        width: 1200px;
        display: flex;
        flex-wrap: wrap;

        .class-list-item {


            margin-bottom: 20px;
            margin-right: 10px;

            border-radius: 10px;
            color: #000;


            >.img-container {
                margin-bottom: 10px;
                overflow: hidden;
                border-radius: 10px 10px 0 0;

                >img {
                    width: 230px;
                    height: 136px;
                    transition: all 0.3s;

                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }

            >.class-title {
                padding-left: 10px;
                margin-bottom: 10px;
                font-size: 14px;
                width: 215px;
                /* 文字在一行显示，多余隐藏，用省略号表示 */
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                &:hover {
                    color: green;
                }
            }

            >.class-info {
                color: #b7bbc4;
                height: 22px;
                box-sizing: border-box;
                line-height: 1.5;
                padding-left: 10px;
                margin-bottom: 10px;
            }

            >.class-price {
                padding: 0 10px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .free {
                    color: #00cf8c;
                    font-weight: 600;
                    font-size: 16px;
                }

                .price {
                    color: #ff4500;
                    font-weight: 500;
                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
                    font-variant: tabular-nums;
                    line-height: 1.5;
                }

                .old-price {
                    color: #999;
                    text-decoration: line-through;
                    font-size: 12px;
                }

                .discount-info {
                    color: #fa8c16;
                    background: #fff7e6;
                    border-color: #ffd591;
                    border: 1px solid #d9d9d9;
                    padding: 0 7px;
                    font-size: 12px;
                    box-sizing: border-box;
                }
            }

        }
    }

}

.pagination-container {
    display: flex;
    justify-content: center;
}

.no-search-result-box {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
        text-align: center;
        font-size: 20px;

    }
}
.my-ant-breadcrumb-item{
    display: flex;;
}
.my-ant-breadcrumb-item  a{
    display: flex;;
}
.my-ant-breadcrumb-item span{
    display: inline-block;
}
.ant-breadcrumb{
    display: flex !important;
}
</style>
